Skip to main content

Collaboration Tools

Overview​

Each live preview generated by Livecycle has built-in collaboration and annotation tools. These tools allow any stakeholder to provide clear feedback within the context of the product itself, and also to review existing feedback from others.

Livecycle's built-in collaboration tools consist of the following:

  • Tools for editing HTML elements and taking screenshots and Edit HTML Elements
  • An Activities Panel that organizes all of the feedback items in one place

The Toolbar​

The toolbar at the bottom left corner of the live preview environment is where you can access the collaboration tools. These tools include:

  • HTML/CSS Element Editor
  • Screen Capture Tool
  • Device Responsive Testing Tool

HTML/CSS Element Editor​

The HTML/CSS Element Editor lets you modify any HTML element on the page in real time.

  1. Click the HTML/CSS Element Editor button in the Toolbar to enable this tool
  2. Select an element on the page and make the desired changes
  3. To edit text, simply type in the new text in the desired location
  4. You can further modify text, font, size, color, background colors, margins, spacing and more from the HTML/CSS Element Editor window that appears
  5. When you've finished making your changes, click the green button at the bottom of the HTML/CSS Element Editor

Submit Feedback Window​

  1. When you've finished making your changes and you've clicked the green button at the bottom of the HTML/CSS Element Editor, the Submit Feedback Window will open
  2. The Submit Feedback Item window will show a summary of the changes you've just made. You can add more explanatory text to the Feedback Item and tag relevant team members for this feedback item.
  3. When you're ready to submit the feedback item, click the Submit Work Item button
  4. Your feedback item will now appear in the Activities Panel, together with the other feedback items that have been left in this live preview environment
  5. The feedback item will also be automatically synced to the corresponding Github repository and will be visible, with the corresponding comments, by the code owner

Screen Capture Tool​

The Screen Capture Tool lets you take a screenshot of any area of the live preview and draw on it to add further context.

  1. Click the Screen Capture Tool button in the Toolbar to enable this tool
  2. Click, hold and drag the cursor to select and highlight the area of the screen you want to capture.
  3. The selected area will be highlighted and the Screen Capture Markup Bar will appear
  4. Select a color from the Screen Capture Markup Bar and mark up the screen capture, as desired.
  5. When you finish marking up the screen capture, click the green button on the right side of the Screen Capture Markup Bar.
  6. The Submit Feedback Item window will open, showing your screen capture and markup. You can add more explanatory text to the Feedback Item and tag relevant team members for this feedback item.
  7. When you're ready to submit the feedback item, click the Submit Work Item button
  8. This feedback item will now appear in the Activities Panel, together with the other feedback items that have been left in this live preview environment

The feedback item will also be automatically synced to the corresponding Github repository and will be visible, with the corresponding comments, by the code owner

The Activities Panel​

The Activities Panel organizes all of the feedback items and related discussion for this live environment. Using the Activities Panel you can track and discuss relevant feedback items and action items with the team.

  1. To open the Activities Panel, simply hover over the left side of the live preview environment. The Activities Panel will automatically open.
  2. Scroll through the Activities Panel to see the work items submitted for this live preview environment
  3. Click on a specific work item to see a thread of comments related to that work item
  4. Work items that have been marked as "Resolved" will be highlighted in green in the Activities Panel
  5. The top section of the Activities Panel shows you information about the PR/branch you are currently viewing and a summary of the number of feedback items currently listed for this live environment
  6. The Github button at the top of the Activities panel opens the Github repository that was used to build this live preview. You will need a Github account to access Github, and you will see that all feedback items are displayed in Github as well
  7. To copy a link to this live preview to share it with others, click the Copy Link button at the top of the Activities Panel